<style>
.editor-wrapper {
  position: relative;
  width: 100%;
  height: 100%; /* 父容器必须有确定高度 */
}

.monaco-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

<template>
  <div class="editor-wrapper">
    <div ref="container" class="monaco-container" className="monaco-editor"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  props: {
    tables: {  // 新增表名 prop
      type: Array,
      default: () => ['users', 'orders'] // 默认示例表名
    },
    value: String,
    language: {default: 'sql'},
    theme: {default: 'vs-dark'}
  },
  data: () => ({
    editor: null,
    completionProviderDispose: null
  }),
  mounted() {
    this.initMonaco();
  },
  beforeDestroy() {
    this.editor?.dispose();
    this.completionProviderDispose?.dispose();
  },
  methods: {
    async initMonaco() {
      await this.$nextTick();
      this.createEditor();
    },
    createEditor() {
      this.editor = monaco.editor.create(this.$refs.container, {
        value: this.value,
        language: this.language,
        theme: this.theme,
        automaticLayout: true
      });

      this.editor.onDidChangeModelContent(() => {
        this.$emit('input', this.editor.getValue());
      });

      // 添加手动布局触发
      this.$nextTick(() => {
        window.addEventListener('resize', () => {
          this.editor.layout();
        });
        this.editor.layout(); // 立即触发一次
      });

      // 自动补全提示
      // 新增代码提示注册 ========================
      const sqlKeywords = [
        'SELECT', 'FROM', 'WHERE', 'INSERT', 'INTO', 'VALUES', 'UPDATE', 'DELETE',
        'CREATE', 'TABLE', 'ALTER', 'DROP', 'INDEX', 'JOIN', 'LEFT', 'RIGHT', 'INNER',
        'OUTER', 'ON', 'AS', 'AND', 'OR', 'ORDER BY', 'GROUP BY', 'HAVING', 'LIMIT',
        'DISTINCT', 'UNION', 'ALL', 'CASE', 'WHEN', 'THEN', 'ELSE', 'END', 'LIKE',
        'IN', 'BETWEEN', 'IS NULL', 'IS NOT NULL'
      ];

      this.completionProviderDispose = monaco.languages.registerCompletionItemProvider('sql', {
        triggerCharacters: [' ', '.'], // 空格和点号触发提示
        provideCompletionItems: (model, position) => {
          const word = model.getWordUntilPosition(position);
          const range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn
          };

          // 生成关键字建议
          const keywordSuggestions = sqlKeywords.map(keyword => ({
            label: keyword,
            kind: monaco.languages.CompletionItemKind.Keyword,
            insertText: keyword,
            range: range,
            detail: 'SQL 关键字'
          }));

          // 生成表名建议
          const tableSuggestions = this.tables.map(table => ({
            label: table,
            kind: monaco.languages.CompletionItemKind.Struct,
            insertText: table,
            range: range,
            detail: '数据表'
          }));

          return {
            suggestions: [...keywordSuggestions, ...tableSuggestions]
          };

        }
      })
    }
  }
};
</script>
